<template>
    <div class="row-box">
        <a-upload
            v-model:file-list="fileList"
            :multiple="uploadConfig.multiple"
            :action="uploadConfig.action"
            :headers="uploadConfig.headers"
            :showUploadList="uploadConfig.showUploadList"
            :accept="uploadConfig.accept"
            :customRequest="handleRequest"
        >
            <a-button>
                <component :is="uploadConfig.icon" />
                {{ uploadConfig.label }}
            </a-button>
        </a-upload>
        <slot name="anyCom"></slot>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import { read, utils } from 'xlsx';
import { setImportHistory } from '../../utils/index';

const emit = defineEmits(['SendJsonExcel']);
let fileList = reactive([]);
const uploadConfig = reactive({
    headers: { authorization: 'authorization-user-token' },
    action: '/',
    multiple: false,
    label: '上传Excel文件',
    accept: '.xlsx',
    showUploadList: false
});

const handleRequest = (file) => {
    console.log('f', file);
    setImportHistory({ file: file.file.name });
    readXLSX(file.file) .then((res) => {
        emit('SendJsonExcel', { isOk: true, jsonExcel: res });
        console.log(res)
    }).catch((err) => {
        emit('SendJsonExcel', { isOk: false });
    });
};

const readXLSX = (file) => {
    let nameSplit = file.name.split('.');
    let format = nameSplit[nameSplit.length - 1];
    if (!['xlsx', 'csv'].includes(format)) {
        return false;
    }
    return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = function (evt) {
            let data = evt.target.result; // 读到的数据
            try {
                var workbook = read(data, { type: 'binary' });
                const wsname = workbook.SheetNames[0];  
                const ws = utils.sheet_to_json(workbook.Sheets[wsname]); 
                console.log(workbook)
                console.log(ws)
                resolve(ws);
            } catch (err) {
                reject('some wrong with import');
            }
        };
    });
};
</script>
<!-- <template>
    <div id="wordView"></div>
</template>

<script>
import mammoth from "mammoth";
export default {
  name: "detail",
  data() {
    return {
      vHtml: "",
      wordURL: "../../style/123456.docx" //文件地址
    };
  },
  created() {
    this.readExcelFromRemoteFile(this.wordURL);
    console.log('1111111111111111111111111')
  },
  methods: {
    // 在线查看word文件
    readExcelFromRemoteFile(url) {
        console.log(url)
      var vm = this;
      var xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.responseType = "arraybuffer";
      xhr.onload = function() {
        if (xhr.status == 200) {
          mammoth
            .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
            .then(function(resultObject) {
              vm.$nextTick(() => {
                document.querySelector("#wordView").innerHTML =
                  resultObject.value;
                // vm.vHtml = resultObject.value;
              });
            });
        }
      };
      xhr.send();
    }
  }
};
</script> -->